// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, TextInput, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { Actions } from 'react-native-router-flux';
import * as ActionTypes from '../../constants/constants.js'

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { list } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, RnFlatList, Good, RnImage } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth } from '../../util/utils.js'
class Magazine extends Component {
  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
    }
    this.list = list.bind(this)
  }

  componentDidMount() {
    this.list(`bookType=2&keyword=${this.search._lastNativeText}`)
  }

  componentWillUnmount() {
    const { dispatch } = this.props
  }

  handleSearch() {
    this.list(`bookType=2&keyword=${this.search._lastNativeText}`)
  }

  render() {
    const { refreshing, active } = this.state
    const { magazine } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: '#fff',
          borderBottomWidth: 1,
          borderStyle: 'solid',
          borderBottomColor: '#e5e5e5'
        }}>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
              Actions.pop()
            }}
          >
            <Icon name="md-arrow-back" size={22} color="#232326" />
          </TouchableOpacity>
          <View style={{
            flex: 1,
            height: 30,
          }}>
            <View
              style={{
                paddingVertical: 0,
                paddingHorizontal: 15,
                borderRadius: 15,
                height: 30,
                backgroundColor: '#f7f7f7',
              }}
            >
              <TextInput
                ref={(r) => this.search = r}
                placeholder="请输入书籍名称"
                placeholderTextColor="#c8c8ca"
                style={{
                  fontSize: 16,
                  borderWidth: 0,
                  color: '#333',
                  lineHeight: 30,
                  padding: 0
                }}
                underlineColorAndroid="transparent"
              />
            </View>
          </View>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
              this.handleSearch()
            }}
          >
            <Icon name="md-search" size={22} color="#252525" />
          </TouchableOpacity>
        </View>
        <View style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          backgroundColor: '#f0f2f5',
          paddingLeft: 3,
          paddingRight: 3,
          paddingTop: 3,
        }}>
          {magazine.map((data, index) => {
            const width = ScreenWidth / 2 - 9
            return (
              <TouchableOpacity
                key={index}
                style={{
                  width: width,
                  margin: 3,
                  marginBottom: 0,
                  backgroundColor: '#fff'
                }}
                onPress={() => {
                  Actions.magazineDetails({ details: data })
                }}
              >
                <View style={{}}>
                  <RnImage resizeMode='cover' style={{ width, height: width }} uri={data.pic} />
                </View>
                <View style={{ padding: 10 }}>
                  <Text style={{
                    fontSize: 13,
                    height: 32,
                    color: '#232326',
                    lineHeight: 16,
                    marginBottom: 5,
                  }}>{data.name}</Text>
                  <View style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                  }}>
                    <Text style={{
                      fontSize: 13,
                      color: '#f23030',
                      lineHeight: 16,
                    }}>RM {data.skuStockList[0].price}</Text>
                    <Text style={{
                      fontSize: 11,
                      color: '#686868',
                      lineHeight: 16,
                    }}>{data.skuStockList[0].title}</Text>
                  </View>
                </View>
              </TouchableOpacity>
            )
          })}
        </View>

      </View >
    );
  }
}


export default connect(({ magazine }) => ({
  magazine
}))(pureRender(Magazine))
